﻿<!DOCTYPE html>
%%HTMLENTETE%%
<html>
<head>
  <meta http-equiv="content-Type" content="text/html; charset=utf-8">
  %%ExpirationCocktail%%
  <title>Interview Trace</title>

  <style>
  body
  {
      font-family: 'Open Sans',sans-serif;
  }

  .GeneralButtons
  {
      background: #f0f0f0;
      border-color: gray;
      border-radius: 5px;
      border-style: solid; 
      border-width: 1px;
      height: 30px;
      padding-left:20px;
      padding-right:20px;
  }

  .GeneralButtons:disabled
  {
      background: lightgray;
      border-color: darkgray;
      color: darkgray;
  }

  .GeneralButtons:hover
  {
      background: #e8e8e8;
      border-color: #2989b3;
  }

  .Headers
  {
      background-color: white;
      border-bottom: #2989b3 2px solid;
      border-left: #c0c0c0 1px solid;
      color: #2989b3;
      font-size: 12pt;
      font-style: normal;
      font-variant: normal;
      font-weight: bold;

      text-wrap: hard-wrap;
  }

  .OddRows
  {
      background: #f0f0f0;
  }

  .EvenRows
  {
      background: #ffffff;
  }


  .QuestionTable
  {
      border-style: solid;
      border-color: black;
      border-width: 1px;
      border-spacing: 0;
      background-color: #FFFFFF;
      font-size: 10pt;
      font-weight: normal;
      font-style: normal;
      font-family: arial,sans-serif;
      font-variant: normal;
      color: #000000;
      width:100%;
  }

  .QuestionTable TD
  {
      padding:1px;
      border-style: solid;
      border-color: silver;
      border-width: 1px;
      height:25px;
  }


  /* Fix for FireFox where the textarea overlaps the right border */
  textarea
  {
      box-sizing: border-box;
  }
  </style>

<body>
  <div style="font-weight:bold;float:left;">
  ##Global_Record##: %%RecordNumber%%
  <br>
  ##Global_QuestionCount##: %%NbQuestions%%
  </div>

  <div style="text-align:right;font-weight:bold;width:100%;">
  ##Global_CurrentQuestion##: %%CurrentQuestionNo%%
  <br>
  ##Global_LastAnsweredQuestion##: %%LastAnsweredQuestion%%
  </div>
  <br>


  <!-- Selectors for recalled answers and previous questions -->

  <div style="float:left;">
  ##Global_RecalledAnswers##<br>
  <select style="width:150px" id=RecalledAnswers>
  %%RecalledAnswersList%%
  </select>
  </div>

  <div style="padding-left:10px;">
  ##Global_AskedQuestions##<br>
  <select style="width:150px" id=QuestionHistory>
  %%PreviousQuestionsList%%
  </select>
  </div>

  <p/>

  <!-- Questions details-->

  <table class="QuestionTable">
  <thead>
    <th class="Headers" style="width:30px;">##InterviewerWeb_22030##</th>
    <th class="Headers" style="width:50px;">##Global_Alias##</th>
    <th class="Headers" style="width:100px;">##Global_Mask##</th>
    <th class="Headers" style="width:50px;">##Global_ProcedureId##</th>
    <th class="Headers" style="width: 50px;">##Global_RotationId##</th>
    <th class="Headers" style="width: 50px;">##Global_ScreenId##</th>
    <th class="Headers" style="width: 50px;">##Global_RosterId##</th>
    <th class="Headers" style="width: 50px;">##Global_SectionId##</th>
    <th class="Headers" style="width: 150px;">##Global_Equation##</th>
    <th class="Headers" style="width: 50px;">##Global_SkipTo##</th>
    <th class="Headers" style="width: 50px;">##Global_SkipElse##</th>
    <th class="Headers" style="width: 50px; display:%%RowHeaderVisible%%">##Global_Row##</th>
    <th class="Headers" style="width: 150px;">##Global_Answer##</th>
    <th class="Headers" style="width: 150px;">##Global_OpenEnd##</th>
  </thead>

%%QuestionAnswersList%%

  </table>



  <p align="right">
  <input class="GeneralButtons" type="BUTTON" value="Close" onclick="window.close();">
  </p>
</body>